import React, { useRef,forwardRef,Fragment,useEffect, useState } from "react";
import {Button} from 'antd'

const MyInput = forwardRef((props,ref) => {
    return (
        <input type="text" ref={ref} {...props} />
    )
})
const RefHookDemo = () => {
    const inputRef = useRef(null);
    const focusInput = () => {
        inputRef.current.focus();
    }
    const [list, setList] = useState([
        { id: 1, name: '张三', age: 22 },
        { id: 2, name: '李四', age: 25 },
    ])
    const curValList = useRef([1,2])
    const handleAdd = () => {
        const newList = [...list, { id: list.length + 1, name: '王五', age: 30 }]
        setList(newList)
        curValList.current = newList.map(item => item.id)
        console.log(curValList.current, 'curValList.current')
        console.log(list, 'list')
    }
    const deleteOne = (item) => {
        const newList = list.filter(i => i.id !== item.id)
        setList(newList)
        curValList.current = newList.map(item => item.id)
        console.log(curValList.current, 'curValList.current')
        console.log(list, 'list')
    }
    
    return (
        <Fragment>
            <div>
                {/* <input type="text" ref={inputRef} /> */}
                <MyInput ref={inputRef} />
                <button onClick={focusInput}>获取焦点</button>
            </div>
            <ul>
                <Button type="primary" onClick={handleAdd}>新增</Button>
                {
                    list.map(item => {
                        return <li key={item.id}>姓名：{item.name}&ensp;年龄：{item.age} <span onClick={() => {deleteOne(item)}}>删除</span></li>
                    })
                }
            </ul>
        </Fragment>
        
    )
}
export default RefHookDemo;